<template>
  <a class="c-title-container" :style="!error ? '' : 'border: 1px solid red;margin-bottom: 30px;'">
    <question-title
      :index="index"
      :total="total"
      :question="question"
    />
    <div class="c-title-container_content">
      <slot></slot>
    </div>
    <div v-if="error" class="c-title-container-error">该题不允许为空</div>
  </a>
</template>

<script>
import QuestionTitle from './questionTitle'
export default {
  name: 'TitleContainer',
  components: {
    QuestionTitle
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    index: {
      type: Number,
      default: 0
    },
    question: {
      type: Object,
      default: null
    },
    error: {
      type: String,
      default: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.c-title-container {
    .c-title-container_content{
      font-size: 14px;
        margin-top: 19px;
        margin-bottom: 43px;
    }
    .c-title-container-error{
      color: red;
      font-size: 12px;
    }
}

</style>
